<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
          charset="UTF-8">
    <title>上传音频</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src@2.5.8/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui-src@2.5.8/dist/layui.min.js"></script>
    <script src="https://img.hwy-study.xyz/music/js/qrcode.min.js"></script>
    <script th:src="@{/js/qrcode.min.js}" src="js/qrcode.min.js"></script>
    <style>
        .Ycenter {
            position: absolute;
            top: 40%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 100%;
        }

        .container {
            position: absolute;
            height: 270px;
            top: 40%;
            left: 50%;
            width: 50%;
            padding: 20px;
            text-align: center;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border: 1px #ccc solid;
            border-radius: 5px;
            box-shadow: 0 0 10px 5px #ccc;
        }


        .codeContainer {
            position: absolute;
            top: 65%;
            left: 50%;
            padding: 20px;
            text-align: center;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border: 1px #ccc solid;
            border-radius: 5px;
            box-shadow: 0 0 10px 5px #ccc;
        }

        .qrcode {
            margin: 0 auto;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px #ccc solid;
            box-shadow: 0 0 5px 5px #ccc;
            width: 128px;
        }

        .m-form {
            margin: 10px;
            height: 100%;
        }

        .fl {
            float: right !important;
        }

        #search {
            display: none;
        }
    </style>
</head>
<body>
<div id="generator" class="layui-anim layui-anim-scaleSpring Ycenter">
    <div class="container">
        <h2>音频二维码生成
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                    style="float: right;margin-right: 10px;"
                    onclick="rightHandler()">
                <i class="layui-icon layui-icon-right"></i>
            </button>
        </h2>

        <form class="layui-form m-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">音乐名称</label>
                <div class="layui-input-block">
                    <input type="text" id="fileName" name="fileName" required
                           lay-verify="required" placeholder="输入音乐名称" oninput="changeHandler(this)"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">歌手名</label>
                <div class="layui-input-block">
                    <input type="text" id="author" name="author" required
                           lay-verify="required" placeholder="输入歌手名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">访问地址</label>
                <div class="layui-input-block">
                    <input type="text" id="tempMp3" placeholder="上传音频，仅允许 MP3 文件"
                           autocomplete="off" class="layui-input" disabled>
                    <div class="layui-form-mid layui-word-aux">
                        只允许上传 MP3 音频且不能大于 30MB
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style="margin-right: 20px;">
                <div class="layui-input-block fl">
                    <button type="button" class="layui-btn" id="upload" disabled>
                        <i class="layui-icon">&#xe67c;</i>上传音频
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="search" class="layui-anim layui-anim-scaleSpring Ycenter">
    <div class="container">
        <h2>二维码查询
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                    style="float: left;margin-left: 10px;"
                    onclick="leftHandler()">
                <i class="layui-icon layui-icon-left"></i>
            </button>
        </h2>
        <form class="layui-form m-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">选择音频</label>
                <div class="layui-input-block">
                    <select id="musicName" name="musicName" lay-search="">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </form>
    </div>

</div>
<div id="code" style="display: none; text-align: center">
    <h2 id="qrcodeText" style="padding: 10px;">
        当前音频二维码
    </h2>
    <div id="qrcode" class="qrcode"></div>
</div>
<script>
    // let uri = '[[@{/}]]';
    let uri = window.location.href;
    const listApi = uri + "list";
    const uploadApi = uri + "upload";
    const getMusicApi = uri + "get/";
    const testUrl = "http://java2.hwy-study.xyz/" + "music/";
    const codeUrl = window.location + "music/";

    function openDialog(url, data) {
        url = codeUrl + url;
        let text;
        if (Boolean(data)) {
            text = data;
        } else {
            text = $("#fileName").val();
        }
        $("#qrcodeText").text(text);
        new QRCode(document.getElementById("qrcode"), {
            text: url,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        layer.open({
            type: 1
            , title: false //不显示标题栏
            , closeBtn: false
            , offset: 'auto'
            , area: '350px;'
            , shade: 0.8
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['确认']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $("#code")
            , success: function (that) {
                that.find(".layui-layer-btn0").on("click", function () {
                    $("#qrcode").empty();
                })
            }
        });
    }

    function changeHandler(that) {
        let val = $(that).val();
        if (val.trim() !== '') {
            $("#upload").removeAttr("disabled");
        } else {
            $("#upload").attr("disabled", "true");
        }
    }

    function rightHandler() {
        $("#search").css("display", "block");
        $("#generator").css("display", "none");
    }

    function leftHandler() {
        $("#search").css("display", "none");
        $("#generator").css("display", "block");
    }

    function selectMusicAjax(id) {
        if (id !== '') {
            $.ajax({
                url: getMusicApi + id,
                success: function (res) {
                    openDialog(res.data.id, res.data.name);
                }
            })
        } else {
            layer.msg("请选择音频文件");
        }
    }

    function selectAjax() {
        $.ajax({
            url: listApi,
            success: function (res) {
                (res.data).forEach(e => {
                    let html = "<option value=" + e.id + ">" + e.name + "</option>";
                    $("#musicName").append(html);
                });
            }
        })
    }

    function optionsAjax() {
        let dl = $(".layui-anim.layui-anim-upbit");
        let dd = dl.children();
        $.each(dd, (i, e) => {
            $(e).on("click", function () {
                let value = $(e).attr("lay-value");
                selectMusicAjax(value);
            })
        });
    }

    $(() => {
        selectAjax();
    });

    layui.use(["form", "table", "layer"], function () {
        function uploadAfterAjax(data) {
            console.log(data);
            let html = "<option value=" + data.id + ">" + data.name + "</option>";
            $("#musicName").append(html);
            form.render();
            optionsAjax();
        }

        let layer = layui.layer;
        let form = layui.form;
        form.render();
        optionsAjax();
        layui.use('upload', function () {
            let upload = layui.upload;
            //执行实例
            let uploadInst = upload.render({
                elem: "#upload",
                url: uploadApi,
                size: 30 * 1024,
                accept: 'audio',
                data: {
                    fileName: function () {
                        return $("#fileName").val();
                    },
                    author: function () {
                        return $("#author").val();
                    }
                },
                before: function () {
                    layui.layer.load();
                },
                done: function (res) {
                    if (res.code === 200) {
                        $("#tempMp3").val(window.location + "music/" + res.data.id);
                        layui.layer.closeAll();
                        openDialog(res.data.id);
                        uploadAfterAjax(res.data);
                        layer.msg(res.msg);
                        return;
                    } else {
                        layui.layer.closeAll();
                        layer.msg(res.msg);
                    }
                },
                error: function (res) {
                    //请求异常回调
                    console.log(res);
                    layui.layer.closeAll();
                }
            });
        });
    });

</script>
</div>
</body>
</html>